<template>
	<view class="content" >
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            @leftClick="back" title="工人信息采集">
        </u-navbar>

        <view class="u-m-t-30 u-m-b-30 u-flex u-row-center">
            <u-icon class="u-m-r-10" name="error-circle" color="#f0ad4e"></u-icon>
            <text class="u-font-26 uni-dec-color">请将采集信息输入下方框中</text>
        </view>

        <!-- 实名制信息 -->
        <view class="u-p-t-30 u-p-b-50">
            <view class="uni-area">
                <uni-item-base-plus :baseData="info" @confirmSelect="confirmSelect" @inputChange="inputChange" />
            </view>
        </view>

        <!-- 下一步 -->
        <view class="next-box u-flex u-flex-col u-row-center">
            <u-button class="pre" shape="circle" text="上一步" @tap="back"></u-button>
            <u-button class="next u-m-t-50" type="primary" shape="circle" text="下一步" @tap="next"></u-button>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
    import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
                // 实名制信息
                info:{
                    type: 'info',
                    line: false,
                    title: '实名制信息',
                    rightText: '',
                    list:[
                        { show:true, required:true, field:'xm', zdv:'', title:'姓名', disabled: true, value:'', type:'input', pla:'请输入内容' },
                        { show:true, required:true, field:'zjhm', zdv:'', title:'公民身份证号码', disabled: true, value:'', type:'input', pla:'请输入内容' },
                        { show:true, required:true, field:'csrq', zdv:'', title:'出生日期', disabled: true, value:'',type:'input', pla:'请输入内容' },
                        { show:true, required:true, field:'xb', zdv:'xb', title:'性别', disabled: true, val:'', value:'', type:'select', pla:'请选择性别', data:[] },
                        { show:true, required:true, field:'mz', zdv:'mz', title:'民族', disabled: true, val:'', value:'', type:'select', pla:'请选择民族', data:[] },
                        { show:true, required:false, field:'jiGuan', zdv:'', title:'籍贯', disabled: false, value:'',type:'input', pla:'请输入籍贯' },
                        { show:true, required:true, field:'hjszd', zdv:'', title:'住址', disabled: false, value:'',type:'input', pla:'请输入内容' },
                        { show:true, required:true, field:'qfjg', zdv:'', title:'签发机关', disabled: true, value:'',type:'input', pla:'请输入内容' },
                        { show:true, required:true, field:'yxksrq', zdv:'', title:'有效期限开始', disabled: true, value:'',type:'input', pla:'开始时间' },
                        { show:true, required:true, field:'yxjsrq', zdv:'', title:'有效期限结束', disabled: true, value:'',type:'input', pla:'结束时间' },
                        { show:true, required:true, field:'lxfs', zdv:'', title:'手机号码', disabled: false, value:'',type:'input', pla:'请输入手机号码' },
                    ]
                },
			}
		},

        computed: {
            ...mapGetters(['autonymSubmitData']),
        },

        onReady(){},

		onLoad() {
            // 渲染视图
            this.info.list.map((v,i)=>{
                v.value = this.autonymSubmitData[v.field]
            })
            // 获取下拉选择数据
            this.getSelectData()
        },

		methods: {
            ...mapMutations(['setAutonymSubmitData']),

            // 返回
            back(){
                uni.navigateBack()
            },


            // 下拉选择数据
            getSelectData(){
                const arr = []
                this.info.list.map((v,i)=>{
                    if( v.type == 'select' ) arr.push({ field:v.field, title: v.title, zdv: v.zdv, index: i })
                })
                arr.map((v,i)=>{
                    let api = JSON.parse(JSON.stringify(this.$apis.CommonDictionaries))
                    api.url += v.zdv
                    this.$request(this,api,{}).then(res=>{
                        if( this.autonymSubmitData.id ){ // 修改
                            let a = res.filter(e=>{ return e.dictValue == this.autonymSubmitData[v.field] })
                            this.info.list[v.index].value = a[0].dictLabel
                        }else{ // 新增
                            if( isNaN(this.autonymSubmitData[v.field]) ){
                                let a = res.filter(e=>{ return this.autonymSubmitData[v.field] == e.dictLabel })
                                this.setAutonymSubmitData({ [v.field]: a[0].dictValue })
                            }else{
                                let a = res.filter(e=>{ return e.dictValue == this.autonymSubmitData[v.field] })
                                this.info.list[v.index].value = a[0].dictLabel
                            }
                        }
                    }).then()
                })
            },


            // 下拉选择确认(本页面暂时未用到该功能)
            confirmSelect(e){
                this.info.list.map((v,i)=>{
                    if( v.field == e.field ) v.value = e.label
                })
                this.setAutonymSubmitData({ [e.field]: e.label })
            },
            // 输入事件
            inputChange(e){
                this.info.list.map((v,i)=>{
                    if( v.field == e.field ) v.value = e.value
                })
                this.setAutonymSubmitData({ [e.field]: e.value })
            },


            // 下一步
            next(){
                // console.log('当前提交数据',this.autonymSubmitData)
                if( !this.autonymSubmitData.hjszd ){
                    uni.$u.toast('住址为必填项')
                    return false
                }
                if ( (/^1[3456789]\d{9}$/.test(this.autonymSubmitData.lxfs)) ) {
                    uni.showLoading({ title:'手机号码验证中' })
                    const parameter = {
                        zjhm: this.autonymSubmitData.zjhm,
                        lxfs: this.autonymSubmitData.lxfs
                    }
                    this.$request(this,this.$apis.verifyPhone,parameter).then(res=>{
                        if( res.code == 200 ){
                            uni.navigateTo({ url: '/pages/certification-bag/info-collect2' })
                        }else{
                            uni.$u.toast(res.msg)
                        }
                    })
                } else {
                    if( this.autonymSubmitData.lxfs ){
                        uni.$u.toast('手机号码格式有误,请重新填写')
                    }else{
                        uni.$u.toast('手机号码为必填项')
                    }
                }
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        background: $uni-text-color-inverse;
        .next-box{
            padding: 116rpx 0 70rpx;
            .pre,.next{
                width: 500rpx;
                margin: 0;
            }
            .pre{
                background: #F6F7F8;
                border: none;
                /deep/.u-button__text{
                    color: #ADB4BD !important;
                }
            }
        }
    }
</style>
